<template>
  <div class="list">
    <van-search
      v-model="searchKeyword"
      show-action
      placeholder="请输入搜索关键词"
      @blur="handleSearch()"
      @cancel="handleCancel()"
    >
    </van-search>

    <van-tabs
      v-model="active"
      color="#fcba37"
      style="overflow-x: scroll"
      v-if="caseVideoList.length > 0"
      @change="onChange"
    >
      <van-tab
        v-for="item in industryList"
        :key="item.industry_id"
        :title="item.industry_name"
      >
        <scroll-view
          style=" height: calc(100vh - 220rpx)"
          :scroll-y="true"
          @scrolltolower="loadMoreData()"
        >
          <view
            style="
              width: 50%;
              padding: 20rpx;
              box-sizing: border-box;
              display: inline-block;
            "
            v-for="element in caseVideoList"
            :key="element.id"
          >
            <view style="position: relative">
              <image
                v-if="isShenhe == 1"
                :src="element.cover"
                mode="scaleToFill"
                lazy-load
                style="width: 100%; height: 510rpx"
              />

              <image
                v-if="isShenhe !== 1"
                :src="element.cover"
                mode="scaleToFill"
                lazy-load
                style="width: 100%; height: 510rpx"
                @click="toDetail(element)"
              />
              <van-icon
                v-if="isShenhe !== 1"
                name="play-circle-o"
                style="
                  position: absolute;
                  top: 210rpx;
                  left: 130rpx;
                  font-size: 60rpx;
                  color: #fff;
                "
                @click="toDetail(element)"
              />
            </view>

            <view>
              <view>{{ element.name }}</view>
              <view style="color: #999; font-size: 26rpx">
                {{ element.description }}
              </view>
            </view>
          </view>
        </scroll-view>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { caseVideo, about, getIndustryList } from '@/api/index'

export default {
  components: {},
  data() {
    return {
      active: 0,

      // 案例行业列表
      industryList: [],
      industry_id: '',

      // 案例视频列表
      caseVideoList: [],

      // 分享标题
      shareTitle: '',
      // 分享图片
      shareImg: '',

      searchKeyword: '', // 搜索关键词

      // 是否为审核状态
      isShenhe: '',

      page: 1,
      pageSize: 10,
      total: '',
    }
  },

  onShareAppMessage() {
    return {
      title: this.shareTitle,
      path: '/pages/index/index',
      imageUrl: this.shareImg,
    }
  },

  async created() {
    //获取行业列表
    this.getIndustryList()

    //关于我们
    this.about()
  },

  methods: {
    //获取案例行业列表
    async getIndustryList() {
      this.caseVideoList = []
      const { data } = await getIndustryList({ name: this.searchKeyword })
      this.industryList = data
      this.active = 0
      this.industry_id = this.industryList[0]?.industry_id || ''

      this.caseVideo()
    },

    //获取案例视频
    async caseVideo() {
      const params = {
        page: this.page,
        page_size: this.pageSize,
        name: this.searchKeyword,
        industry_id: this.industry_id,
      }
      const respCase = await caseVideo(params)

      this.caseVideoList = respCase.data.data
      this.total = respCase.data.total
    },

    // 切换标签
    onChange(e) {
      const i = e.detail.index
      this.active = i
      this.industry_id = this.industryList[i].industry_id
      this.caseVideo()
    },

    // 点击搜索按钮或按回车时触发
    handleSearch(e) {
      this.searchKeyword = e.detail.value
      this.getIndustryList()

      this.$forceUpdate()
    },

    // 取消搜索
    handleCancel() {
      this.searchKeyword = ''
      this.getIndustryList()
    },

    //关于我们
    async about() {
      const respOurs = await about()
      this.shareTitle = respOurs.data.share_title
      this.shareImg = respOurs.data.share_img
      this.isShenhe = respOurs.data.shenhe
    },

    // 点击播放视频
    toDetail(item) {
      wx.navigateTo({
        url: `/pages/components/detail?id=${item.id}&cover=${item.cover}&videofile=${item.videofile}&name=${item.name}&description=${item.description}`,
      })
    },

    // 触底懒加载
    loadMoreData() {
      var allTotal = this.page * this.pageSize

      if (allTotal < this.total) {
        this.pageSize += 10
        this.caseVideo()
      } else {
        console.log('已加载全部数据')
      }
    },
  },
}
</script>

<style scoped></style>
